﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="common/js/common.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(function () {
            // // 隐藏提示框域
            $("#alert-success").hide();
            $("#alert-info").hide();
            $("#alert-warning").hide();
            $("#alert-danger").hide();

            $("#isCreateTransaction").click(function () {
                if (this.checked) {
                    $("#create-transaction2").show(200);
                } else {
                    $("#create-transaction2").hide(200);
                }
            });

            $("#activitySource").click(function () {
                searchActivity();
                $("#searchActivityModal").modal("show");

            });

            // 为搜索市场活动的搜索框绑定事件，通过触发回车键，查询并展示搜索的市场活动
            $("#search-activityName").keydown(function (event) {
                // 如果是回车键
                if (event.keyCode === 13) {
                    searchActivity();
                    // 不触发的默认行为关闭
                    return false;
                }
            });

            // 确认按钮
            $("#confirmBtn").click(function () {
                let $check = $("input[name=activity]:checked");
                let id = $check.val();
                let value = $("#" + id).html();
                $("#activity").val(value);
                $("#hidden-activityId").val(id);
                $("#searchActivityModal").modal("hide");
            });

            // 转换按钮
            $("#transformBtn").click(function () {
                // 转换之前判断是否创建交易
                if ($("#isCreateTransaction").prop("checked")) {
                    // 需要创建交易
                    $("#transForm").submit();
                }
                convertClue();

                deleteClue("${param.id}");
            })
        });

        // 删除线索
        function deleteClue(clueId) {
            $.ajax({
                url: "workbench/clue/deleteClue.do",
                data: {
                    "clueId": clueId
                },
                type: "post",
                datatype: "json",
                success: function (data) {
                    if (data) {
                        window.location.href = "workbench/clue/index.jsp";
                    }
                },
                error: function () {
                    globalAlert(alert_danger, "服务异常! 删除失败");
                }
            });
        }

        // 转换线索
        function convertClue() {
            $.ajax({
                url: "workbench/clue/convertClue.do",
                data: {
                    "clueId": "${param.id}"
                },
                type: "post",
                datatype: "json",
                success: function (data) {
                    if (data) {
                        window.location.href = "workbench/clue/index.jsp";
                    }
                },
                error: function () {
                    globalAlert(alert_danger, "转换失败");
                }
            });
        }

        // 市场活动源
        function searchActivity() {
            $.ajax({
                url: "workbench/clue/getActivitiesByName.do",
                data: {
                    "clueId": "${param.id}",
                    "name": $("#search-activityName").val(),
                    "activityId": $("#hidden-activityId").val()
                },
                type: "get",
                datatype: "json",
                success: function (data) {
                    // $("#activityBody").html(html);
                    let html = "";
                    let activityList = JSON.parse(data);
                    $.each(activityList, function (index, item) {
                        html += '<tr><td><input type="radio" name="activity" value="' + item.id + '"/></td>';
                        html += '<td id="' + item.id + '">' + item.name + '</td>';
                        html += '<td>' + item.startDate + '</td>';
                        html += '<td>' + item.endDate + '</td>';
                        html += '<td>' + item.owner + '</td></tr>';
                    });
                    $("#activityBody").html(html);
                },
                error: function () {
                    globalAlert(alert_warning, "服务异常，获取列表失败");
                }
            });
        }
    </script>

</head>
<body>
<%-- 创建全局提示框 --%>
<div class="globalAlert"
     style="position: absolute;top:150px;left: 50%;width: 25%; z-index: 1000;text-align: center;vertical-align: center">
    <div class="alert alert-success" role="alert" style="height: 50px;" id="alert-success"></div>
    <div class="alert alert-info" role="alert" style="height: 50px;" id="alert-info"></div>
    <div class="alert alert-warning" role="alert" style="height: 50px;" id="alert-warning"></div>
    <div class="alert alert-danger" role="alert" style="height: 50px;" id="alert-danger"></div>
</div>

<!-- 搜索市场活动的模态窗口 -->
<div class="modal fade" id="searchActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">搜索市场活动</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input class="form-control" placeholder="请输入市场活动名称，支持模糊查询" style="width: 300px;"
                                   type="text" id="search-activityName">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table class="table table-hover" id="activityTable" style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>开始日期</td>
                        <td>结束日期</td>
                        <td>所有者</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="activityBody">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" id="confirmBtn" type="button">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="page-header" id="title" style="position: relative; left: 20px;">
    <h4>转换线索 <small>${param.fullname}${param.appellation}-${param.company}</small></h4>
</div>
<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
    新建客户：${param.company}
</div>
<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
    新建联系人：${param.fullname}
</div>
<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
    <input id="isCreateTransaction" type="checkbox"/>
    为客户创建交易
</div>
<div id="create-transaction2"
     style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;">

    <form id="transForm" action="workbench/clue/createSimpleTransaction.do" method="post">
        <div class="form-group" style="width: 400px; position: relative; left: 20px;">
            <label for="amountOfMoney">金额</label>
            <input class="form-control" id="amountOfMoney" name="money" type="text">
        </div>
        <div class="form-group" style="width: 400px;position: relative; left: 20px;">
            <label for="tradeName">交易名称</label>
            <input class="form-control" id="tradeName" name="name" type="text" required>
        </div>
        <div class="form-group" style="width: 400px;position: relative; left: 20px;">
            <label for="expectedClosingDate">预计成交日期</label>
            <input class="form-control" id="expectedClosingDate" name="expectedDate" type="date">
        </div>
        <div class="form-group" style="width: 400px;position: relative; left: 20px;">
            <label for="stage">阶段</label>
            <select class="form-control" id="stage" name="stage" required>
                <option selected disabled>------请选择------</option>
                <c:forEach items="${stage}" var="s">
                    <option value="${s.value}">${s.text}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group" style="width: 400px;position: relative; left: 20px;">
            <label for="activity">市场活动源&nbsp;&nbsp;<a id="activitySource" href="javascript:void(0);"
                                                      style="text-decoration: none;"><span
                    class="glyphicon glyphicon-search"></span></a></label>
            <input class="form-control" id="activity" placeholder="点击上面搜索" readonly type="text">
            <input hidden id="hidden-source" name="source" value="${param.source}">
            <input hidden id="hidden-activityId" name="activityId"/>
        </div>
    </form>

</div>

<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
    记录的所有者：<br>
    <b>${param.owner}</b>
</div>
<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
    <input class="btn btn-primary" type="button" id="transformBtn" value="转换">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input class="btn btn-default" type="button" value="取消" onclick="window.history.back();">
</div>
</body>
</html>